<template>
  <div id="main">
    <div id="left">
      <ul id="menuDom">
        <li
          v-for="item in menuList"
          :class="menuSel == item.name ? 'sel' : ''"
          @click="menuClick(item)"
        >
          <i class="iconfont" :class="item.iconName"></i>
          <span>{{ item.displayName }}</span>
        </li>

        <li class="loginOut" @click="logout">
          <svg
            t="1692415543961"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4913"
            width="32"
            height="32"
          >
            <path
              d="M761.607758 636.772848c-12.815515 32.023273-35.219394 60.819394-57.623273 86.388364a256 256 0 0 1-86.388364 57.654303c-31.992242 12.784485-67.180606 22.372848-105.596121 22.372849s-73.572848-6.392242-105.596121-22.372849a406.590061 406.590061 0 0 1-86.388364-57.654303 255.720727 255.720727 0 0 1-57.592242-86.388364c-12.846545-31.961212-22.434909-67.211636-22.434909-105.596121 0-22.341818 3.227152-44.776727 6.423272-63.984485 6.361212-22.341818 12.784485-41.580606 22.372849-60.819394 9.619394-19.145697 22.403879-35.157333 35.219394-54.396121A215.350303 215.350303 0 0 1 352.007758 307.2c9.619394-6.423273 19.207758-9.588364 28.796121-6.423273 9.619394 3.258182 19.207758 6.423273 25.6 16.011637 6.423273 9.588364 9.619394 19.238788 6.423273 28.796121-3.227152 9.619394-6.423273 19.176727-16.042667 25.6-25.6 19.207758-47.972848 41.611636-60.788364 70.376727-12.784485 28.858182-22.434909 57.623273-22.434909 89.615515 0 25.6 6.423273 51.2 16.011636 76.8 9.619394 25.6 25.6 44.838788 41.611637 60.819394a187.578182 187.578182 0 0 0 60.819394 41.580606c24.203636 10.550303 50.362182 15.980606 76.768969 16.011637 25.6 0 51.2-6.392242 76.831031-16.011637 25.6-9.588364 44.807758-25.6 60.788363-41.580606a187.578182 187.578182 0 0 0 41.580606-60.819394c10.550303-24.234667 15.980606-50.362182 16.042667-76.8 0-31.961212-6.392242-60.788364-19.176727-86.388363-12.815515-25.6-32.023273-51.2-57.654303-67.211637-9.557333-6.361212-12.784485-15.949576-15.980606-25.6-3.227152-9.588364 0-19.176727 6.423273-28.765091 6.361212-9.619394 15.980606-12.784485 25.6-16.011636 9.588364-3.196121 19.145697 0 28.76509 6.361212A297.890909 297.890909 0 0 1 716.8 358.4c12.784485 16.011636 25.6 35.188364 35.188364 51.2 9.619394 19.176727 16.011636 38.415515 22.434909 57.592242 6.392242 19.207758 6.392242 41.580606 6.392242 63.984485 3.196121 38.415515-3.227152 73.634909-19.207757 105.658182v-0.062061zM473.584485 265.619394c0-9.588364 3.227152-19.176727 12.815515-28.827152 7.478303-7.974788 17.873455-12.567273 28.796121-12.784484 9.619394 0 19.176727 3.258182 25.6 12.784484 8.005818 7.509333 12.629333 17.904485 12.815515 28.858182v230.4c0 9.557333-3.227152 19.207758-12.815515 25.631031-6.423273 6.361212-15.980606 12.722424-25.6 12.722424-9.619394 0-19.207758-3.196121-28.796121-12.784485-6.392242-6.392242-12.815515-16.011636-12.815515-25.6V265.588364zM512 0C230.4 0 0 230.4 0 512S230.4 1024 512 1024 1024 793.6 1024 512 793.6 0 512 0z"
              fill="#d81e06"
              p-id="4914"
            ></path>
          </svg>
          <span>退出登录</span>
        </li>
      </ul>
    </div>
    <div id="right">
      <!-- <videoVue></videoVue> -->
      <component
        :is="allTypeComponentJson[menuSel]"
        @jumpPage="jumpPage"
      ></component>
    </div>
  </div>
</template>
<script setup>
import videoVue from "./video.vue";
import riskPerson from "./riskPerson.vue";
import cardStatistic from "./cardStatistic.vue";
import salaryStatistic from "./salaryStatistic.vue";
import setting from "./setting.vue";
import overview from "./overview.vue";
import { useRouter } from "vue-router";
import { ref, shallowRef, watch, reactive, onMounted } from "vue";
const router = useRouter();
// 退出登录
const logout = () => {
  delete sessionStorage.time;
  delete sessionStorage.isAdmin;
  router.push({
    name: "login",
  });
};

var allTypeComponentJson = shallowRef({
  videoVue: videoVue,
  riskPerson: riskPerson,
  cardStatistic: cardStatistic,
  salaryStatistic: salaryStatistic,
  setting: setting,
  overview: overview,
});

var menuList = reactive([
  {
    name: "overview",
    displayName: "首页概览",
    iconName: "icon-shouye",
  },
  {
    name: "videoVue",
    displayName: "个税审核",
    iconName: "icon-shuiwushuju",
  },
  {
    name: "riskPerson",
    displayName: "风险人员",
    iconName: "icon-renyuan",
  },
  {
    name: "cardStatistic",
    displayName: "打卡统计",
    iconName: "icon-daka-copy",
  },
  {
    name: "salaryStatistic",
    displayName: "薪资统计",
    iconName: "icon-xinzipeizhi",
  },
]);

onMounted(() => {
  if (sessionStorage.isAdmin == 1) {
    menuList.push({
      name: "setting",
      displayName: "系统设置",
      iconName: "icon-xitong",
    });
  }
});

var menuSel = ref("overview");
var menuClick = (item) => {
  menuSel.value = item.name;
};
// 风险人员跳转到视频审核页面
const jumpPage = (data) => {
  console.log("data: ", data);
  if (data) {
    menuClick(menuList[data]); // 跳转页面
  } else {
    menuClick(menuList[1]); // 跳转页面
  }
};
</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  & > div {
    height: 100%;
  }
}

#left {
  width: 250px;
  background-color: rgb(238, 241, 246);

  flex-shrink: 0;

  #menuDom {
    width: 100%;
    height: 100%;

    li {
      width: 100%;
      height: 48px;
      // line-height: 32px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      cursor: pointer;
      transition: all 0.5s ease;

      i,
      svg {
        width: 20px;
        height: 20px;
        margin-left: 20px;
        margin-right: 10px;
        color: #262626;
      }

      i {
        font-size: 18px;
      }

      span {
        font-size: 16px;
        color: #262626;
      }
    }

    li.sel,
    li:hover {
      background-color: #ffffff;

      span {
        color: #409eff;
      }

      i {
        color: #409eff;
      }
    }

    .loginOut {
      width: 250px;
      position: absolute;
      left: 0;
      bottom: 0;
      cursor: pointer;

      span {
        color: #262626;
      }

      &:hover {
        background-color: #ffffff;
      }
    }
  }
}

#right {
  flex: 1;
}
</style>
